<script setup>
import router from "@/router/index.js";
import {ref} from "vue";
import EmailLogin from "@/views/login/email-login.vue";
import UsernameLogin from "@/views/login/username-login.vue";

const currentPage = ref('username')
const toForgetPasswordPage = async () => {
  await router.push("/forgetPassword")
}

const toEmailLogin = () => {
  currentPage.value = 'email'
}

const toUsernameLogin = () => {
  currentPage.value = 'username'
}
</script>

<template>
  <div class="bg">
    <div class="login-form">
      <username-login v-if="currentPage==='username'"></username-login>
      <email-login v-if="currentPage==='email'"></email-login>
      <div class="bottom">
        <span @click="toForgetPasswordPage">忘记密码？</span>
        <span v-if="currentPage==='username'" @click="toEmailLogin">邮箱登录</span>
        <span v-if="currentPage==='email'" @click="toUsernameLogin">用户名登录</span>
      </div>
    </div>
  </div>

</template>

<style lang="scss" scoped>
.bg {
  position: relative;
  height: 100vh;
  width: 100vw;
  background-image: url("../../assets/images/login-bg.jpg");
  background-size: cover;
  //background-position: center;
  background-repeat: no-repeat;
  background-position: -220px -400px;
  background-color: #f6f6f6;

  .login-form {
    position: fixed;
    right: 100px;
    top: 50%;
    transform: translateY(-50%);
    //width: 350px;
    padding: 10px 30px;
    border-radius: 10px;
    opacity: 0.8;
    box-shadow: 1px 1px 1px 1px #096565;
    color: black;

    .bottom {
      width: 100%;
      display: flex;
      justify-content: space-between;

      span {
        cursor: pointer;
      }
    }
  }
}

</style>
